<template>
  <view class="all-artworks-list">
    <view class="artworks-list-item-container">
      <view
        v-for="(itemData, index) in artworksListData"
        :key="index"
        class="list-item-container">
        <view
          v-for="(item, inde_) in itemData"
          :key="inde_"
          :class="`artworks-item artworks-item${item.type}`"
          @click="handleArtworks(item, inde_)">
          <image
            v-if="item.cate_id == 7"
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.video_cover_url"
            mode="widthFix"
            :class="`image-cover image-cover${item.cate_id}`">
          </image>
          <image
            v-else
            width="212rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="0"
            :show-menu-by-longpress="false"
            :src="item.wx_cover_url || item.cover_url + '?imageMogr2/auto-orient/thumbnail/!30p/blur/1x0/quality/80'"
            mode="aspectFill"
            :class="`image-cover image-cover${item.cate_id}`">
          </image>
          <!-- 审核状态 -->
          <view v-if="!isBatch && (item.audit_status === 'review' || item.audit_status === 'reject') && !isAlbum" class="show-status-container2">
            <view v-if="item.audit_status === 'review'" class="wait">
              <text>审核中</text>
            </view>
            <view v-else-if="item.audit_status === 'reject'" class="reject">
              <text>违规</text>
            </view>
          </view>

          <view
            v-if="!isAlbum"
            class="show-status-container3"
            :class="{
              'title-style': item.title
            }">
            <u-icon name="setting" color="#fff" size="24"></u-icon>
            <view v-if="item.title" class="artworks-title">{{ item.title }}</view>
            <view v-else class="artworks-title">请设置搜索词</view>
          </view>

          <!-- 下载和价格 -->
          <view v-if="!isAlbum" class="show-status-container">
            <view class="footer-container">
              <view v-if="item.cate_id !== '5' && !item.template_id" class="artworks-price">
                ¥{{ item.price }}
              </view>
              <view v-else class="artworks-price">
                官方价格
              </view>
              <view>
                <u-icon name="download" size="24"></u-icon>
                <text style="padding-left: 6rpx">{{ item.download_num }}</text>
              </view>
            </view>
          </view>
          
          <!-- 播放按钮 -->
          <image
            v-if="item.cate_id === '7'"
            src="@/static/image/play.png"
            mode="scaleToFill"
            class="play-icon"
          />
          <!-- 状态显示 -->
          <image
            v-if="isBatch && !item.checked"
            src="@/static/icon/unchecked.png"
            mode="scaleToFill"
            class="checkbox"
          />
          <image
            v-else-if="isBatch && item.checked"
            src="@/static/icon/checked.png"
            mode="scaleToFill"
            class="checkbox"
          />
          <!-- 置顶 -->
          <view v-if="item.is_top === '1' && !isAlbum" class="is_top">
            <text>置顶</text>
          </view>
          <!-- 置顶 -->
          <view v-if="item.album_top === '1' && isAlbum" class="is_top">
            <text>置顶</text>
          </view>

          <!-- 操作框 -->
          <view v-if="showOp && item.show_op" class="artworks-info-deit">
            <view class="op-container">
              <view class="info-content" @click.stop="handleEditPrice(item)">修改价格</view>
              <view class="info-content" @click.stop="handleSetTitle(item)">设置搜索词</view>
              <view class="info-content" @click.stop="handleGoHome(item)">我要推广</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import WallpaperItem from '@/components/artworksItem/wallpaper.vue';
  import Square from '@/components/artworksItem/square.vue';
  import VideoWallpaper from '@/components/artworksItem/videoWallpaper.vue';
  import BgItem from '@/components/artworksItem/bgArtworksItem.vue';
  import TextTemplate from '@/components/artworksItem/texttemPlate.vue';
export default {
  components: {
    WallpaperItem,
    Square,
    VideoWallpaper,
    BgItem,
    TextTemplate
  },
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    },
    isShowInfo: {
      type: Boolean,
      default: true
    },
    showOp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '列表',
      artworksListData: []
    }
  },
  watch: {
    artworksList: {
      immediate: true,
      handler(val) {
        if (val && val.length > 0) {
          let waterfallLeftListData = [];
          let waterfallCenterListData = [];
          let waterfallRightListData = [];
          val.forEach((item, index) => {
            if (index % 3 === 0) {
              waterfallLeftListData.push(item);
            } else if (index % 3 === 1) {
              waterfallCenterListData.push(item);
            } else if (index % 3 === 2) {
              waterfallRightListData.push(item);
            }
          });
          this.artworksListData = [];
          this.artworksListData.push(waterfallLeftListData);
          this.artworksListData.push(waterfallCenterListData);
          this.artworksListData.push(waterfallRightListData);
        } else {
          this.artworksListData = [];
        }
      }
    }
  },
  methods: {
    // 点击作品
    handleArtworks(rowDta, index) {
      const currentClickIndex = this.artworksList.findIndex(item => item.id === rowDta.id);
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta, currentClickIndex);
        return;
      }
      this.$emit('handleCheckBox', currentClickIndex);
    },

    // 点击修改
    handleEditPrice(rowDta) {
      this.$emit('handleEditPrice', rowDta);
    },

    // 设置标题
    handleSetTitle(rowDta) {
      this.$emit('handleSetTitle', rowDta);
    },

    // 我要推广
    handleGoHome(rowDta) {
      this.$emit('handleGoHome', rowDta);
    }
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{
    display: flex;
    justify-content: space-between;

    .list-item-container{
      min-width: 31%;
      max-width: 31%;
    }

    .artworks-item{
      width: 214rpx;
      margin-bottom: 24rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      border: 1rpx solid #eaeaea;

      .image-cover{
        width: 100%;
        max-height: 364rpx;
        float: left;
      }

      .image-cover2,
      .image-cover4,
      .image-cover3{
        height: 212rpx;
      }

      .image-cover8,
      .image-cover6{
        height: 150rpx;
      }

      .image-cover7{
        border-radius: 8rpx;
      }

      .play-icon{
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .5);
      }

      .show-status-container{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 90%;
        line-height: 38rpx;
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rpx;
        margin: auto;
        display: flex;
        padding-left: 10rpx;
        padding-right: 10rpx;
        font-size: 20rpx;
        border-radius: 8rpx;
      }

      .show-status-container3{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 90%;
        line-height: 38rpx;
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 60rpx;
        margin: auto;
        display: flex;
        padding-left: 10rpx;
        padding-right: 10rpx;
        font-size: 20rpx;
        border-radius: 8rpx;

        .artworks-title{
          padding-left: 8rpx;
          overflow: hidden; // 超出一行文字自动隐藏
          text-overflow: ellipsis;// 文字隐藏后添加省略号
          white-space: nowrap; // 强制不换行
        }
      }

      .title-style{
        background: rgba($color: $uni-color-primary, $alpha: .6);
      }

      .show-status-container2{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 100rpx;
        height: 36rpx;
        line-height: 36rpx;
        z-index: 1;
        position: absolute;
        right: 0;
        top: 0;
        margin: auto;
        display: flex;
        padding-left: 10rpx;
        padding-right: 10rpx;
        font-size: 20rpx;
        border-radius: 8rpx 0 8rpx 8rpx;

        .wait{
          width: 100%;
          display: flex;
          justify-content: center;
          color: #f29100;
        }

        .reject{
          width: 100%;
          display: flex;
          justify-content: center;
          color: #fa3534;
          font-size: 20rpx;
          align-items: center;
        }
      }

      .checkbox{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        top: 0;
        color: #fff;
        border-radius: 6rpx;
        background-color: $uni-color-primary2;
      }

      .footer-container{
        width: 100%;
        display: flex;
        justify-content: space-between;

        .artworks-price{
          color: #fff;
          flex: 1;
        }
      }

      .artworks-info-deit{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .op-container{
          width: 100%;
          height: 200rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
        }

        .info-content{
          width: 80%;
          height: 48rpx;
          text-align: center;
          line-height: 48rpx;
          border-radius: 8rpx;
          background: rgba($color: $uni-color-primary, $alpha: .7);
          color: #fff;
          font-size: 24rpx;
        }
      }

    }

    .artworks-item{
      width: 100%;
      max-height: 364rpx;
      min-height: 212rpx;
      float: left;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
    }
  }
</style>